{include file="public/nheader"}
<div class="layui-fluid layui-bg-white">
    <form action="{:url()}" class="layui-form layui-form-fixed">
        <div class="layui-form-item">
            <label class="layui-form-label">
                <font color="red">* </font>类型
            </label>
            <div class="layui-input-block">
                <input type="radio" name="type" lay-filter="type" value="2" {if !empty($row.type) &&
                    $row.type==2}checked{/if} title="城市代理">
                <input type="radio" name="type" lay-filter="type" value="3" {if !empty($row.type) &&
                    $row.type==3}checked{/if} title="区域代理">
                <input type="radio" name="type" lay-filter="type" value="4" {if !empty($row.type) &&
                    $row.type==4}checked{/if} title="街道代理">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <font color="red">* </font>代理
            </label>
            <div class="layui-input-block">
                <select name="agentid" lay-search>
                    <option value="">请选择代理账号</option>
                    {foreach $agent as $v}
                    <option value="{$v.id}" {if !empty($row.agentid) && $row.agentid==$v.id}selected{/if}>
                        {$v.nickname}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="provinceshow" {if !empty($row.type) && $row.type> 1}
            style="display:block"{else}style="display:none"{/if}>
            <label class="layui-form-label">
                <font color="red">* </font>省份
            </label>
            <div class="layui-input-block">
                <select name="province" data-area="" lay-filter="province" lay-search>
                    <option value="">请选择选择省份</option>
                    {foreach $province as $v}
                    <option value="{$v.area_code}" {if !empty($row.province) &&
                        $row.province==$v.area_code}selected{/if}>{$v.name}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="cityshow" {if !empty($row.type) && $row.type> 1}
            style="display:block"{else}style="display:none"{/if}>
            <label class="layui-form-label">
                <font color="red">* </font>城市
            </label>
            <div class="layui-input-block">
            </div>
        </div>
        <div class="layui-form-item" id="areashow" {if !empty($row.type) && $row.type> 2}
            style="display:block"{else}style="display:none"{/if}>
            <label class="layui-form-label">
                <font color="red">* </font>区域
            </label>
            <div class="layui-input-block">
                <select name="area" data-area="" lay-filter="area" lay-search>
                    <option value="">请选择选择区域</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" id="streetshow" {if !empty($row.type) && $row.type> 3}
            style="display:block"{else}style="display:none"{/if}>
            <label class="layui-form-label">
                <font color="red">* </font>街道
            </label>
            <div class="layui-input-block">
                <select name="street" data-area="" lay-filter="street">
                    <option value="">请选择选择街道</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                一键选择
            </label>
            <div class="layui-input-block">
                <input type="checkbox" lay-skin="switch" lay-text="全选|取消" lay-filter="father">
            </div>
        </div>
        <div class="layui-form-item">
            <font color="red">1、当前用户通行政区存在高级别权限不可添加低级别 2、添加级别已被添加请先删除被添加人的权限 3、勾选区域已被当前代理添加会自动跳过</font>
        </div>
        <div class="layui-footer layui-form-item layui-center ">
            <input type="hidden" value="{$row['id']|default='0'}" name="id" />
            <button class="layui-btn" lay-filter="submitIframe" type="button" lay-submit>提交</button>
            <button class="layui-btn layui-btn-primary" type="button" sa-event="closeDialog">取消</button>
        </div>
    </form>
</div>

{include file="public/nfooter"}
<script>
    layui.use(['form', 'layer', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        form.on('radio(type)', function (data) {
            var type = data.value;
            if (type == 1) {
                alert('该类型已关闭');
                return false;
            }
            $('select[name="province"]').val("");
            $('#provinceshow').show();
            $('#cityshow').hide();
            $('#cityshow .layui-input-block').html('');
            $('#areashow').hide();
            $('#areashow .layui-input-block').html('');
            $('#streetshow').hide();
            $('#streetshow .layui-input-block').html('');
            form.render();
        });
    });
</script>
<script>
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;
        //监听省份选择
        form.on('select(province)', function (data) {
            var type = $('input[name="type"]:checked').val();
            if (!type) {
                alert('请选择添加类型');
                return false;
            }
            if (!data.value) {
                $('#cityshow .layui-input-block').html('');
                $('#areashow .layui-input-block').html('');
                $('#streetshow .layui-input-block').html('');
                $('#cityshow').hide();
                $('#areashow').hide();
                $('#streetshow').hide();
                form.render();
                return false;
            }
            //发异步，把数据提交给php
            $.ajax({
                type: 'get',
                url: '/base/getregion',
                data: { area_code: data.value, level: 2 },
                success: function (res) {
                    if (res.code == 200) {
                        if (type > 2) {
                            var str = '<select name="city" data-area="" lay-filter="city" lay-search><option value="">请选择城市</option>';
                            $.each(res.data, function (i, obj) {
                                str += '<option value="' + obj.area_code;
                                str += '">' + obj.name;
                                str += '</option>';
                            });
                            str += '</select>';
                        } else {
                            var str = '';
                            $.each(res.data, function (i, obj) {
                                str += '<input name="city[]" type="checkbox" lay-skin="primary" value="' + obj.area_code + '" title="' + obj.name + '" />';
                            });
                        }
                        $('#cityshow .layui-input-block').html(str);
                        $('#cityshow').show();
                        $('#areashow').hide();
                        $('#streetshow').hide();
                        form.render();
                    } else {
                        layer.msg(res.msg, { icon: 2, time: 1000 });
                    }
                }
            });
            return false;
        });

        form.on('switch(father)', function (data) {
            var leng = $("input[type='checkbox']").length;
            if (data.elem.checked) {
                if (leng <= 1) {
                    layer.msg('暂无可选中项,请填写相关信息后再重试', { icon: 2, time: 1000 });
                    return false;
                }
                $('input[type="checkbox"]').prop("checked", true);
                form.render();
            } else {
                $('input[type="checkbox"]').prop("checked", false);
                form.render();
            }
        });

        //监听城市选择
        form.on('select(city)', function (data) {
            var type = $('input[name="type"]:checked').val();
            if (!type) {
                alert('请选择添加类型');
                return false;
            }
            if (!data.value) {
                $('#areashow .layui-input-block').html('');
                $('#streetshow .layui-input-block').html('');
                $('#areashow').hide();
                $('#streetshow').hide();
                form.render();
                return false;
            }
            //发异步，把数据提交给php
            $.ajax({
                type: 'get',
                url: '/base/getregion',
                data: { area_code: data.value, level: 3 },
                success: function (res) {
                    if (res.code == 200) {
                        if (type > 3) {
                            var str = '<select name="area" data-area="" lay-filter="area" lay-search><option value="">请选择区域</option>';
                            $.each(res.data, function (i, obj) {
                                str += '<option value="' + obj.area_code;
                                str += '">' + obj.name;
                                str += '</option>';
                            });
                            str += '</select>';
                        } else {
                            var str = '';
                            $.each(res.data, function (i, obj) {
                                str += '<input name="area[]" type="checkbox" lay-skin="primary" value="' + obj.area_code + '" title="' + obj.name + '" />';
                            });
                        }
                        $('#areashow .layui-input-block').html(str);
                        $('#areashow').show();
                        $('#streetshow').hide();
                        form.render();
                    } else {
                        layer.msg(res.msg, { icon: 2, time: 1000 });
                    }
                }
            });
            return false;
        });

        //监听区域选择
        form.on('select(area)', function (data) {
            console.log(1);
            var type = $('input[name="type"]:checked').val();
            if (!type) {
                alert('请选择添加类型');
                return false;
            }
            if (!data.value) {
                $('#streetshow .layui-input-block').html('');
                $('#streetshow').hide();
                form.render();
                return false;
            }
            //发异步，把数据提交给php
            $.ajax({
                type: 'get',
                url: '/base/getregion',
                data: { area_code: data.value, level: 4 },
                success: function (res) {
                    if (res.code == 200) {
                        var str = '';
                        $.each(res.data, function (i, obj) {
                            str += '<input name="street[]" type="checkbox" lay-skin="primary" value="' + obj.id + '" title="' + obj.name + '" />';
                        });
                        $('#streetshow .layui-input-block').html(str);
                        $('#streetshow').show();
                        form.render();
                    } else {
                        layer.msg(res.msg, { icon: 2, time: 1000 });
                    }
                }
            });
            return false;
        });

    });
</script>